<template>
	<view class="container">
		<!-- 头部切换 -->
		<u-subsection :list="['日常数据', '体检数据']" :current="activeTab" @change="handleTabChange" mode="button"
			activeColor="#2979ff" bgColor="#f8f8f8"></u-subsection>

		<!-- 数据卡片列表 -->
		<view class="card-list">
			<!-- 日常数据卡片 -->
			<u-cell-group v-if="activeTab === 0">
				<u-cell v-for="(item, index) in dailyData" :key="index" :title="formatDate(item.recordDate)"
					@click="showDetail(item)">
					<view slot="value" class="cell-value">
						<u-text :text="`体温: ${item.temperature}℃`" size="14"></u-text>
						<u-text :text="`心率: ${item.heartRate}bpm`" size="14"></u-text>
						<u-text :text="`体重: ${item.weight}kg`" size="14"></u-text>
					</view>
				</u-cell>
			</u-cell-group>

			<!-- 体检数据卡片 -->
			<u-cell-group v-if="activeTab === 1">
				<u-cell v-for="(item, index) in medicalData" :key="index" :title="formatDate(item.checkDate)"
					@click="showDetail(item)">
					<view slot="value" class="cell-value">
						<u-text :text="`血压: ${item.bloodPressure}`" size="14"></u-text>
						<u-text :text="`血糖: ${item.bloodSugar}`" size="14"></u-text>
						<u-text :text="`胆固醇: ${item.cholesterol}`" size="14"></u-text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>

		<!-- 详情弹窗 -->
		<u-popup :show="showPopup" mode="center" round="16" @close="closeShowPopup">
			<view class="popup-content" v-if="selectedData">
				<u-text :text="activeTab === 0 ? '日常数据详情' : '体检报告详情'" size="18" bold class="title"></u-text>

				<!-- 日常数据详情 -->
				<template v-if="activeTab === 0">
					<u-text prefixIcon="编号--" :text="selectedData.elderId" />
					<u-text prefixIcon="姓名--" :text="selectedData.elderName" />
					<u-text prefixIcon="记录时间--" :text="formatDate(selectedData.recordDate)" />
					<u-text prefixIcon="体温--" :text="selectedData.temperature + '℃'" />
					<u-text prefixIcon="心率--" :text="selectedData.heartRate + 'bpm'" />
					<u-text prefixIcon="体重--" :text="selectedData.weight + 'kg'" />
					<u-text prefixIcon="精神状态--" :text="selectedData.mentalState" />
					<u-text prefixIcon="用药情况--" :text="selectedData.medication" />
				</template>

				<!-- 体检数据详情 -->
				<template v-else>
					<u-text prefixIcon="编号--" :text="selectedData.elderId" />
					<u-text prefixIcon="姓名--" :text="selectedData.elderName" />
					<u-text prefixIcon="检查日期--" :text="formatDate(selectedData.checkDate)" />
					<u-text prefixIcon="血压--" :text="selectedData.bloodPressure" />
					<u-text prefixIcon="血糖--" :text="selectedData.bloodSugar" />
					<u-text prefixIcon="胆固醇--" :text="selectedData.cholesterol" />
					<u-text prefixIcon="骨密度--" :text="selectedData.boneDensity" />
					<u-text prefixIcon="视力听力--" :text="selectedData.visionHearing" />
					<u-text prefixIcon="皮肤健康--" :text="selectedData.skinHealth" />
					<u-text prefixIcon="肠胃管理--" :text="selectedData.stomachManagement" />
				</template>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getExaminationHealthData, getDailyHealthData } from '../healthManage/healthManageApi'
export default {
	components: {
		DetailItem: {
			props: ['label', 'value'],
			render(h) {
				return h('view', { class: 'detail-item' }, [
					h('u-text', {
						props: {
							text: this.label + '：',
							size: 14,
							color: '#606266'
						},
						style: { minWidth: '120rpx' }
					}),
					h('u-text', {
						props: {
							text: this.value || '暂无数据',
							size: 14,
							color: '#909399'
						}
					})
				]);
			}
		}
	},
	data() {
		return {
			activeTab: 0,
			showPopup: false,
			selectedData: null,
			dailyData: [
				{
					elderId: '0001',
					elderName: '张三',
					recordDate: '2023-08-01',
					temperature: '36.5',
					weight: '65',
					heartRate: '72',
					mentalState: '良好',
					medication: '降压药 1次/日'
				}
			],
			medicalData: [
				{
					elderName: '0001',
					elderId: '张三',
					checkDate: '2023-08-01',
					bloodPressure: '120/80mmHg',
					bloodSugar: '5.2mmol/L',
					cholesterol: '4.8mmol/L',
					boneDensity: '正常',
					visionHearing: '视力1.0，听力正常',
					weight: '65kg',
					urineTest: '正常',
					heartRate: '75bpm',
					mentalState: '良好',
					skinHealth: '正常',
					stomachManagement: '无异常'
				}
			]
		};
	},
	computed: {
		currentData() {
			return this.activeTab === 0 ? this.dailyData : this.medicalData;
		}
	},
	onShow() {
		// 获取日常健康数据
		getDailyHealthData(uni.getStorageSync('elderId')).then(res => {
			console.log("日常健康数据", res);
			this.dailyData = res.data.map(item => ({
				...item,
				elderId: uni.getStorageSync('elderId'),         // 为每个数据项添加 elderId
				elderName: uni.getStorageSync('elderName')      // 为每个数据项添加 elderName
			}));

		});
		// 获取体检健康数据
		getExaminationHealthData(uni.getStorageSync('elderId')).then(res => {
			console.log("体检健康数据", res);
			this.medicalData = res.data.map(item => ({
				...item,
				elderId: uni.getStorageSync('elderId'),
				elderName: uni.getStorageSync('elderName')
			}));
		});
	},
	methods: {
		handleTabChange(index) {
			this.activeTab = index;
		},
		// 打开弹窗
		showDetail(item) {
			console.log(item);
			this.selectedData = item;
			console.log("选中的数据", this.selectedData);
			this.showPopup = true;
		},
		// 关闭弹窗
		closeShowPopup() {
			this.showPopup = false;
		},
		formatDate(dateStr) {
			if (!dateStr) return '未知日期';
			const date = new Date(dateStr);
			return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
		}
	}
};
</script>

<style lang="less" scoped>
.container {
	padding: 20rpx;
}

.card-list {
	margin-top: 30rpx;
}

.cell-value {
	display: flex;
	flex-direction: column;
}

.popup-content {
	z-index: 9999;
	/* 添加此行 */
	padding: 40rpx;
	width: 600rpx;
	max-height: 80vh;
	overflow-y: auto;

	.title {
		margin-bottom: 30rpx;
		text-align: center;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}
	}
}
</style>
